<template>
	<view class="productSort">
		<div class="index">
			<view class="header acea-row row-between-wrapper a">
				<view @click="goGoodSearch()" class="search acea-row row-middle"><text class="iconfont icon-xiazai5" style="font-size: 24rpx;">请点击搜索</text></view>
			</view>
			
			
		</div>
		<div>
			<view class="content_box home_content_box">
				<!-- 菜单 -->
				<Menu :list="menus"></Menu>
			
			</view>
		</div>
		


	<!-- 标签页头部，允许水平滑动 -->
	<view style="display: flex;">
	<scroll-view scroll-x="true" class="tabs" :scroll-into-view="'tab'+navActive">
      <view :id="'tab'+index" class="tab" :class="{'l-tab-selected': index == navActive}" v-for="(item, index) in category" :key="index" @click="setActiveTab(item,index)">
        <text >{{item.cateName}}</text>
        <view class="l-tab-bottom-line" v-if="index == navActive"></view>
      </view>
	 
     </scroll-view>
	 <view style="width: 90px;font-size: 15px; padding: 7px;color: #909090;">查看更多</view>
</view>
    <!-- 标签页内容，使用swiper组件实现滑动 -->
    <swiper class="swiper" :current="navActive" @change="setSwiperTab">
          <swiper-item v-for="(page, cateindex) in category" :key="cateindex">
            <view class="content">
              <scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" @scroll="scroll" @touchstart="touchstart" @touchend="touchend">
                <my-unit @transfer="getCartNum" v-for="(item, index) in productList" :key="index" :info="item"></my-unit>
              </scroll-view>
            </view>
          </swiper-item>
        </swiper>

			
<view class="floating-button">
  <button @click="handleClick">
	  <image style=" width: 50px;height: 33px;" src="@/static/print.png"></image>
	</button>
  <span class="badge" v-if="cartNum>0">{{cartNum}}</span>
</view>

	</view>
</template>
<script>
import myUnit  from '@/components/myUnits/purchaseUnit/unit.vue';
import { getHomeData, getShare,getMenu } from '@/api/public';
import { getCategory } from '@/api/store';
import { trim } from '@/utils';
import Menu from '@/components/Menu';
import { getProducts,getCartCount ,getNumList} from "@/api/store";
export default {
	name: 'GoodsClass',
	components: {Menu,myUnit},
	props: {},
	data: function() {
		const s = "",
		  id = 0,
		  title = "",
		  merId="";
		
		return {
			numList:[],
			cartNum:0,
			productList:[],
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#007AFF',
				iconColor: '#fff'
			},
			modelData:[],
			initIndex:0,
			menus: [],
			category: [],
			navActive: 0,
			search: '',
			lock: false,
			where: {
			  page: 1,
			  limit: 8
			 
			},
		};
	},
	watch: {
		'$yroute.query.id': function(n) {
			if (n) {
				this.activeCateId(n);
			}
		}
	},
	onLoad() {
		
	},
	onReachBottom(){
		
	},
	mounted: function() {
		this.loadCategoryData();
			getCartCount({
				numType: 0
			}).then(res => {
			
			this.cartNum = res.data.count
			});
			
			getNumList().then(res => {
				
			this.numList = res.data
			});
		getMenu().then(res => {
			that.$set(that, 'menus', res.data);

		});
		// document.addEventListener("scroll", this.onScroll, false);
		let that = this;
		this.navActive = parseInt(this.$yroute.query.navActive)
		if(this.$yroute.query.navActive != undefined){
			this.navActive = parseInt(this.$yroute.query.navActive)
		}else{
			this.navActive=0
		}
		this.getList()
	},
	methods: {
		getCartNum(num){
			this.cartNum = num
		},
		//去上传文件
		handleClick(){
			this.$yrouter.push({
			  path: "/pages/shop/ShoppingCart/index"
			});
		},
		fabClick() {
						uni.showToast({
							title: '点击了悬浮按钮',
							icon: 'none'
						})
					},
					switchBtn(hor, ver) {
						if (hor === 0) {
							this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
							this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
						} else {
							this.horizontal = hor
							this.vertical = ver
						}
						this.$forceUpdate()
					},
		setSwiperTab(event){
			this.navActive = event.detail.current;
			console.log(this.category[event.detail.current].id)
			this.where.pid = this.category[event.detail.current].id
			this.where.page = 1
			this.productList = []
			this.getList()
		},
		setActiveTab(item,index){
		
			this.navActive = index
			this.where.pid = item.id
			
			
		},
		touchend(){
			
		},
		touchstart(){
			
		},
		/**
		 * @name 获取列表
		 */
		getList(){
			var that = this
			 console.log(`获取第${that.where.page}页数据`);
	
			getProducts(that.where).then((res) => {
				let list = res.data.records
			if(that.numList.length>0 && list.length>0){
				list.forEach((item,index)=>{
					for (let i = 0; i < that.numList.length; i++) {
						let cartnumitem = that.numList[i]
						if(cartnumitem.productId==item.id){
							item.quantity = cartnumitem.cartNum
						}
					}
				})
			}
				
			  that.loading = false;
			  if (that.target) {
			    that.productList = list;
			  } else {
			    that.productList.push.apply(that.productList, list);
			  }
			  that.target = false
			  that.loadend = list.length < that.where.limit; //判断所有数据是否加载完成；
			  that.where.page = that.where.page + 1;
			});
		},
		
		/**
		 * @name 触底加载
		 */
		scrolltolower(event){
			this.getList(this.page)
		},
		
		scroll(e){
			
			
		},
		
		scrolltoupper(){
			
		},
		
		goGoodSearch() {
			this.$yrouter.push('/pages/shop/GoodsList/index');
		},
		goGoodsList(child) {
			this.$yrouter.push({
				path: '/pages/shop/GoodsList/index',
				query: { id: child.id, title: child.cateName }
			});
		},
		activeCateId(n) {
			let index = 0;
			n = parseInt(n);
			if (!n) return;
			this.category.forEach((cate, i) => {
				if (cate.id === n) index = i;
			});

			if (index !== this.navActive) {
				this.asideTap(index);
			}
		},
		loadCategoryData() {
			getCategory().then(res => {
				this.category =[{cateName:"推荐",id:0}];
				res.data.forEach((cate, i) => {
					this.category.push(cate)
				});
				// this.$nextTick(() => {
				// 	if (this.$yroute.query.id) {
				// 		this.activeCateId(this.$yroute.query.id);
				// 	}
				// });
			});
	
		},
		submitForm: function() {
			var val = trim(this.search);
			if (val) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsList/index',
					query: { s: val }
				});
				setTimeout(() => (this.search = ''), 500);
			}
		},
		asideTap(index) {
			this.navActive = index;
		}
	},
	beforeDestroy: function() {
		// document.removeEventListener("scroll", this.onScroll, false);
	}
};
</script>

<style>
	.floating-button {
	  position: fixed; /* 固定位置，保持悬浮 */
	  bottom: 20px; /* 距底部20px */
	  right: 20px; /* 距右侧20px */
	  width: 60px;
	  height: 60px;
	}
	
	.floating-button button {
	  width: 100%;
	  height: 100%;
	  border-radius: 50%; /* 圆形 */
	  background-color: #007BFF; /* 蓝色背景 */
	  color: white;
	  border: none;
	  font-size: 24px; /* 加号大小 */
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
	}
	
	.floating-button .badge {
	  position: absolute;
	  top: -10px; /* 角标的顶部位置 */
	  right: -10px; /* 角标的右侧位置 */
	  background-color: red;
	  color: white;
	  width: 25px;
	  height: 25px;
	  border-radius: 50%; /* 圆形 */
	  display: flex;
	  align-items: center; /* 内容垂直居中 */
	  justify-content: center; /* 内容水平居中 */
	  font-size: 14px;
	  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); /* 阴影效果 */
	}
	.l-tab-selected{
		color: #237ddc;
	}
	.l-tab-bottom-line{

		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 70%;
		height: 2px;
		background-color: #237ddc;
		animation: fadeIn .5s ease;
	}
	@keyframes fadeIn{
		from {
			width: 0;
		}
		to {
			width: 70%;
		}
	}
	.tabs {
	  display: flex;
	  white-space: nowrap;
	  overflow-x: auto;
	}
	
	.tab {
	      padding: 7px;
	      display: inline-block;
	      width: auto;
	      max-width: none;
	      font-size: 16px;
	}
	
	.swiper {
	  height: 100vh; /* 根据需要调整高度 */
	}
	
	.content {
	  background-color: #f5f5f5;
	  height: 100%;
	  overflow: hidden;
	 
	  
	}
	.purchase-body{
		height: calc(100% - 88upx);
		overflow: auto
	}
	.home_content_box {
		margin-top: 100rpx;
	}
	
.productSort {
	padding: 10px;
	height: 100%;
	background-color: #fff;
}
.header.acea-row.row-center-wrapper {
	background-color: #fff;
}
.acea-row.row-center-wrapper {
	background-color: #fff;
}
.title.acea-row.row-center-wrapper {
	background-color: #fff;
}
.aside .item.on::after {
	position: absolute;
	right: 0;
	width: 0.48rem;
	height: 0.48rem;
}
	.purchase-list {
		background-color: #f5f5f5;
		height: 100%;
		overflow: hidden;
	
	}
	

	
</style>
